import { Button, Checkbox, Form, Input, message as antdMessage } from 'antd';
import React from 'react';
import { useAppDispatch } from '../../app/hooks';
import { loginSuccess } from '../../app/user';
import { login } from '../../servicer';
import { useNavigate } from 'react-router-dom'

const App: React.FC = () => {
	const dispatch = useAppDispatch()
	const navigate = useNavigate()
	const onFinish = async (values: any) => {
		const resp = await login(values)
		const { code, message, data } = resp.data;
		if (code === 200) {
			dispatch(loginSuccess(data));
			localStorage.setItem('token', data.token);
			antdMessage.success(message);
			navigate('/')
		}
	}

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};

	return (
		<Form
			name="basic"
			labelCol={{ span: 8 }}
			wrapperCol={{ span: 16 }}
			initialValues={{ remember: true }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			autoComplete="off"
		>
			<Form.Item
				label="Username"
				name="username"
				rules={[{ required: true, message: 'Please input your username!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item
				label="Password"
				name="password"
				rules={[{ required: true, message: 'Please input your password!' }]}
			>
				<Input.Password />
			</Form.Item>

			<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
				<Button type="primary" htmlType="submit">
					Submit
				</Button>
			</Form.Item>
		</Form>
	);
};

export default App;